<template>
  <div class="articlesContent">
    <div class="top">
      <!-- <div class="left">
        <div class="author-img"></div>
        <p class="name text">昵称：XXXX</p>
        <p class="sign text">个签：这个人很懒什么都没有留下</p>
        <p class="tel text">联系电话：XXXXXXXXXXXX</p>
        <p class="wx text">微信：XXXXXXXXXXXX</p>
        <p class="address text">住址：XXXXXXXXXXX</p>
      </div> -->
      <div class="container"> 
        <el-card :body-style="{ padding: '0px',display: 'flex',justifyContent: 'space-between', alignItems: 'center' }" @click.native="goArticleDetail(item)" v-for="(item, index) in allArticleLists" :key="index">
          <div style="width:500px;padding: 14px;">
            <span class="tit">{{item.title}}</span>
            <p class="content">{{item.excerpt}}</p>
            <div class="bottom clearfix">
              <span class="author"><i class="el-icon-edit"></i>作者：{{item.user.username}}</span>
              <span class="time"><i class="el-icon-alarm-clock"></i>发布时间：{{changeTime(item.created_time)}}</span>
              <span class="comments"><i class="el-icon-chat-dot-square"></i>{{item.num}}</span>
            </div>
          </div>
          <div style="width:300px;height:100%;">
            <img style="width:100%;height:100%;" :src='item.image' class="image" alt="文章图" title="文章图">
          </div>
        </el-card>
      </div>
      <div class="right">
        <div class="excellentArticles">
          <div style="padding:5px;border: 1px solid #eee;font-size:12px;background-color:#eee;">TOP5</div>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="changeLists()">换一批</el-button>
        </div>
        <ul class="articlesTit">
          <li v-for="(item, index) in excellentArticleLists" :key="index" @click="goArticleDetail(item)">
            <a href="javascript:;" style="width:100px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;text-decoration:none;color:#333;" :title="item.title">{{item.title}}</a>
            <span>{{item.user.username}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="foot">
      <el-pagination
        style="margin:0 auto;"
        background
        @current-change="CurrentPageChange"
        :current-page.sync="currentPage"
        :page-sizes="[5]"
        layout="total, prev, pager, next, jumper, sizes"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showPersonal: {
      type: Boolean,
    },
  },
  data () {
    return {
      huan: 1,
      total: 0,//总文章数量
      currentPage: 1, // 当前页
      // 所有文章列表
      allArticleLists: [],
      // 优秀文章
      excellentArticleLists: []
    }
  },
  methods: {
    // 换一批事件
    changeLists () {
      // if (this.excellentArticleLists.length > this.total) {
      //   this.$message({
      //     message: '已经到顶了哦~',
      //     type: 'warning'
      //   })
      //   return
      // } else {
        if (this.huan < this.total%5+1) {
          this.huan = this.huan + 1
        } else if (this.huan >= this.total%5+1) {
          this.$message({
            message: '已经到顶了哦~',
            type: 'warning'
          })
          return
        }
        this.$get('/articles',{p:this.huan}).then(res => {
          this.excellentArticleLists = res.results
        })
      // }
    },
    // 当前页变化
    CurrentPageChange (num) {
      this.pageSize = num
      this.$get('/articles',{p:this.currentPage}).then(res => {
        this.allArticleLists = res.results
      })
    },
    // 去文章详情
    goArticleDetail (item) {
      let user = item.user.id
      let id = item.id
      this.$router.push({
        path: './articleDetail',
        query: {
          user: user,
          id: id,
        }
      })
    },
    // 时间转换
    changeTime (time) {
      let dateee = new Date(time).toJSON();
      let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
      return date
    },
    // 获取所有文章
    getAllArticles () {
      this.$get('/articles').then((res)=>{
        this.allArticleLists = res.results
        this.total = res.count
        this.excellentArticleLists = res.results
      })
    }
  },
  created () {
    this.getAllArticles()
  }
}
</script>

<style lang="less" scoped>
.articlesContent {
  // background-color: #fff;
  .top {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    // .left {
    //   width: 20%;
    //   height: 300px;
    //   margin-right: 10px;
    //   text-align: center;
    //   border: 1px solid #ccc;
    //   .author-img {
    //     width: 60px;
    //     height: 60px;
    //     margin: 0 auto;
    //     margin-top: 20px;
    //     border: 1px solid #ccc;
    //     border-radius: 50%;
    //   }
    //   .text {
    //     font-size: 14px;
    //     color: #666;
    //     line-height: 1;
    //   }
    // }
    .container {
      width: 60%;
      margin-right: 10px;
      .tit {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
      }
      .content {
        width: 100%;
        font-size: 14px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis; 
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        
      }
      .bottom i {
        margin-right: 5px;
      }
      .time, .comments, .author {
        cursor: pointer;
        font-size: 14px;
        color: #787878;
      }
      .time, .comments {
        margin-left: 10px;
      }
    }
    .right {
      width: 20%;
      height: 320px;
      border: 1px solid #eee;
      background: #fff;
      .excellentArticles {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        border-bottom: 1px solid #eee; 
      }
      .articlesTit {
        padding: 0 10px;
      }
      .articlesTit li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 12px;
        color: #333;
        cursor: pointer;
      }
    }
  }
  .foot {
    width: 35%;
    margin: 0 auto;
    margin-top: 10px;
    padding: 10px 0px;
  }
  .el-card {
    margin-bottom:10px;
  }
}
</style>

